<template>
  <div class="app">
    <h3>罗曼</h3>
    <div class="inp">
      <el-input v-model="input" placeholder="输入关键字" class="ipt" />
      <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
        新增
      </el-button>
    </div>
    <!-- 抽屉组件 -->
    
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
      <el-form ref="formRef" :model="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="" :rules="[{ required: true, },]">
          <el-input autocomplete="off" />
        </el-form-item>
        <el-form-item label="年龄" prop="" :rules="[{ required: true, },]">
          <el-input autocomplete="off" />
        </el-form-item>
        <el-form-item label="地址" prop="" :rules="[{ required: true, },]">
          <el-input autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm(formRef)">Reset</el-button>
          <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>


  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { FormInstance } from 'element-plus'
const input = ref('')
const drawer = ref(false)

const formRef = ref()

const numberValidateForm = reactive({
  age: '',
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
// 重置按钮组件
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style scoped>
.inp {
  display: flex;
}

.ipt {
  width: 200px;
}
</style>